<template>
	<view class="container">
		<uni-nav-bar shadow left-icon="left" title="用户列表" @clickLeft="back" />
		<view class="uni-container">
			<uni-list>
				<uni-list-item v-for="(item,index) in tableData" :title="'昵称: '+item.nickname" :note="item.openid"
					showArrow :thumb="item.headimgurl" thumb-size="lg" clickable @click="toggle('right',item)" />
			</uni-list>
			<uni-load-more :status="isMore ? (loading ? 'loading' : 'more') : 'noMore'"></uni-load-more>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content popup-height" :style="'width: '+(windowWidth>540?500:300)+'px;font-size='+(windowWidth>540?16:14)+'px;'">
				<!-- <text class="text">popup 内容</text> -->
				<scroll-view scroll-y="true" :style="'height:' + windowHeight + 'px'"  :show-scrollbar="false">
					<!-- 用户信息 -->
					<view class="user_box">
						<view class="head_img">
							<image class="headimgurl" :src="showData.headimgurl" mode="aspectFit"></image>
						</view>
						<view class="user_info">
							<view class="user_name">
								{{showData.nickname}}
							</view>
					
						</view>
					</view>
					<uni-section title="用户标识-OPENID" titleColor="#909399" type="line">
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{showData.openid}}</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="公众号配置-eveTemplateId" titleColor="#909399" type="line">
						<view class="line">
							<view class="center">
								<text selectable="true"
									user-select="true">{{template.eveTemplateId}}</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="公众号配置-早上模板ID" titleColor="#909399" type="line">
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{template.morningTemplateId}}</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="公众号配置-晚上模板ID" titleColor="#909399" type="line">
						<view class="line">
							<view class="center">
								<text v-if="template.nightTemplateId" selectable="true" user-select="true">{{template.nightTemplateId}}</text>
								<text v-else>暂未设置</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="ip属地" titleColor="#909399">
						<template v-slot:decoration>
							<view class="decoration quotes"></view>
						</template>
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{template.ipAddress}}</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="行政区划编码" titleColor="#909399">
						<template v-slot:decoration>
							<view class="decoration quotes"></view>
						</template>
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{template.district}}</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="恋爱纪念日" titleColor="#909399">
						<template v-slot:decoration>
							<view class="decoration love"></view>
						</template>
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{template.lianaitime}} 我们在一起啦！</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="生日" titleColor="#909399">
						<template v-slot:decoration>
							<view class="decoration quotes"></view>
						</template>
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{template.birthday}} 我来到了这个世界！</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="备注" titleColor="#909399">
						<template v-slot:decoration>
							<view class="decoration quotes"></view>
						</template>
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true">{{template.remark}}</text>
							</view>
						</view>
					</uni-section>
					<uni-section title="生效时间" titleColor="#909399">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
						<view class="line">
							<view class="center">
								<text selectable="true" user-select="true" v-if="template.cronmoring||template.cornnight">
									早上 {{formatTimer(template.cronmoring)}}<br />
									晚上 {{formatTimer(template.cornnight)}}
								</text>
								<text v-else>暂未设置</text>
							</view>
						</view>
					</uni-section>
				</scroll-view>
				
			</view>
		</uni-popup>

	</view>
</template>


<script>
	import {
		getUserList,
		getUserInfo,
		getTemplate
	} from '@/api/openid/index.js'
	import {
		formatTime
	} from '@/util/common.js'
	export default {
		data() {
			return {
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				showData: '',
				template: '',
				page: 1,
				pageSize: 15,
				isMore: true,
				status: 'more',
				windowWidth: '',
				windowHeight: '',
				isShow: false
			}
		},
		onLoad() {
			this.pageSize = Math.ceil(getApp().globalData.deviceInfo.windowHeight / 65)
			this.windowWidth = getApp().globalData.deviceInfo.windowWidth
			this.windowHeight = getApp().globalData.deviceInfo.windowHeight
			console.log(getApp().globalData.deviceInfo);
		},
		onShow() {
			this.getData(1)
		},
		// 下拉刷新事件
		onPullDownRefresh() {
			//调用获取数据方法
			if(!this.isShow){
				this.getData(1)
			} else {
				this.getTemplate(this.showData,'right')
			}
		},
		// 上拉加载事件
		onReachBottom() {
			if(!this.isShow){
				let allTotal = this.page * this.pageSize;
				if (this.isMore) {
					this.page++;
					this.getData(this.page)
				}
			}
		},
		methods: {
			// 返回上级
			back() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
			},
			// corn转HH:mm
			formatTimer(time) {
				return formatTime(time)
			},
			// 获取用户列表
			getData(page) {
				this.loading = true
				this.page = page
				let params = {
					page: this.page,
					pagesize: this.pageSize
				}
				getUserList(params).then(res => {
					let data = [...this.tableData, ...res.data.list]
					this.tableData = page !== 1 ? data : res.data.list
					this.total = res.data.total
					this.isMore = this.page < res.data.pages
					this.loading = false
					uni.stopPullDownRefresh();
				}).catch(() => {
					this.loading = false
					uni.stopPullDownRefresh();
				})
			},
			// 弹出层change事件，关闭或打开
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				this.isShow = e.show
			},
			// 打开或关闭弹出层
			toggle(type, data) {
				this.showData = data
				this.getTemplate(data, type)
			},

			// 获取用户模板
			getTemplate(data, type) {
				uni.showLoading({
					title: '正在获取信息'
				})
				getTemplate({
					openid: data.openid
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200 && res.data) {
						this.template = res.data
						if(!this.isShow){
							this.$refs.popup.open(type)
						}
					} else {
						uni.showToast({
							title: '暂无用户数据，或未关注公众号',
							icon: 'none',
							duration: 1500
						})
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '暂无用户数据，或未关注公众号',
						icon: 'none',
						duration: 1500
					})
					uni.stopPullDownRefresh();
				})
			},
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.uni-group {
		display: flex;
		// align-items: center;
	}

	.headimgurl {
		width: 3rem;
		height: 3rem;
		border-radius: .6rem;
		margin-right: 1rem;
	}

	.popup-content {
		@include flex;
		flex-direction: column;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		// width: 260px;
	}

	.user_box {
		@include flex;
		box-shadow: $uni-shadow-base;
		align-items: center;
		padding: 1rem;
		background-color: #c5ffaa;
		position: sticky;
		top: 0px;
		z-index: 2;
		
	}

	.user_name {
		color: $uni-main-color;
		font-weight: bolder;
	}

	.line {
		padding-bottom: .5rem;
		margin: 0 1rem;
		border-bottom: .02rem solid $uni-border-3;
	}

	.line:first-child {
		padding-top: 0;
	}

	.center {
		font-size: .9rem;
		color: $uni-main-color;
	}

	.decoration {
		width: .25rem;
		height: 1rem;
		margin-right: 4px;
		border-radius: 25%;
		background-color: $uni-success;
	}

	.quotes {
		background-color: $uni-warning;
	}

	.love {
		background-color: #ff8789;
	}
</style>
